import React, { Component } from 'react';
import { Row, Col, Card, Tabs, DatePicker } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import styles from './Analysis.less';

// 引入 ECharts 主模块
import echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/map/js/china';

let myChart = null;

class SalesBar extends Component {
  componentDidMount() {
    const { id } = this.props;
    const option = {
      background: 'rgba(60,75,142,0.3)',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '2%',
        right: '4%',
        bottom: '6%',
        top: '20%',
        containLabel: true,
      },
      legend: {
        data: ['重量', '票数', '应收', '应付'],
        right: 10,
        textStyle: {
          color: '#fff',
        },
      },
      xAxis: {
        type: 'category',
        data: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月',
        ],
        axisLine: {
          lineStyle: {
            color: 'white',
          },
        },
        axisTick: {
          show: true,
        },
      },

      yAxis: {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: 'white',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255,255,255,0.3)',
          },
        },
      },
      series: [
        {
          name: '重量',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FFE35A',
                },
                {
                  offset: 1,
                  color: '#F8850C',
                },
              ]),
            },
          },
          data: [600, 200, 300, 500, 300, 700, 500, 800, 300, 500, 760, 900],
        },
        {
          name: '票数',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#3ACCFF',
                },
                {
                  offset: 1,
                  color: '#1B4FFF',
                },
              ]),
            },
          },
          data: [400, 400, 300, 300, 300, 600, 400, 900, 300, 700, 400, 866],
        },
        {
          name: '应收',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FF68A2',
                },
                {
                  offset: 1,
                  color: '#E40000',
                },
              ]),
            },
          },
          data: [400, 500, 500, 500, 500, 400, 800, 500, 500, 420, 620, 600],
        },
        {
          name: '应付',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#16D8FF',
                },
                {
                  offset: 1,
                  color: '#00C369',
                },
              ]),
            },
          },
          data: [400, 600, 700, 700, 988, 400, 700, 600, 700, 400, 600, 520],
        },
      ],
    };
    myChart = echarts.init(document.getElementById(id));
    myChart.setOption(option);
    window.addEventListener('resize', function() {
      myChart.resize();
    });
  }

  render() {
    const { loading, height, id } = this.props;
    return (
      <div
        id={id}
        style={{
          width: '100%',
          height,
        }}
      />
    );
  }
}

export default SalesBar;
